<template>
  <div class="app-container">
    <!-- 添加章节按钮 -->
    <div>
      <el-button
        type="primary"
        @click="handleChapterAdd"
      >添加章节</el-button>
    </div>
    <!-- 章节列表 TODO -->
    <el-collapse accordion>
      <el-collapse-item
        v-for="chapter in chapterList"
        :key="chapter.id"
        class="deploy-setting"
      >
        <template slot="title">
          <div>
            <span style="float:left;padding-left:20px;font-weight:bold;font-size:14px;color:#79B1F1;">{{ chapter.title }}</span>
            <div
              class="acts"
              style="float:right;padding-right:20px;"
              @click="stopProp"
            >
              <el-button
                type="text"
                style="color: palegreen"
                @click="handleAdd(chapter.id)"
              >添加课时</el-button>
              <el-button
                type="text"
                @click="handleChapterEdit(chapter,true)"
              >编辑</el-button>
              <el-button
                type="text"
                style="color: #E46868;"
                @click="removeChapterById(chapter.id)"
              >删除</el-button>
            </div>
          </div>
        </template>

        <!-- 视频 -->
        <ul class="chapterList videoList">
          <li
            v-for="video in chapter.children"
            :key="video.id"
          >
            <p>
              <span style="color:peachpuff">{{ video.title }}</span>
              <el-tag
                v-if="!video.videoSourceId"
                size="mini"
                type="danger"
                style="margin-left:20px;"
              >
                {{ '尚未上传视频' }}
              </el-tag>
              <el-tag
                v-if="video.free"
                size="mini"
                type="success"
                style="margin-left:20px;"
              >{{ '免费观看' }}</el-tag>
              <span class="acts">
                <el-button
                  type="text"
                  @click="handleEdit(chapter.id, video.id,true)"
                >编辑</el-button>
                <el-button
                  type="text"
                  style="color: #E46868"
                  @click="handleDelete(video.id)"
                >删除</el-button>
              </span>
            </p>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <div style="text-align:center">
      <el-button
        type="primary"
        @click="prev"
      >上一步</el-button>
      <el-button
        type="primary"
        @click="next"
      >下一步</el-button>
    </div>

    <!-- cur框 -->
    <template>
      <model-dialog
        ref="modelDialog"
        @ok="modalFormOk"
      >
        <template
          slot="dialog-content"
          slot-scope="tableInfoData"
        >
          <!-- 这里是slot 绑定的数据 包含列表数据 是否显示按钮 -->
          <chapter-form
            ref="modelContent"
            :courseId="courseId"
            :table-info-data="tableInfoData"
          />
        </template>
      </model-dialog>
    </template>

    <!-- cur框 -->
    <template>
      <model-dialog
        ref="VideoModelDialog"
        @ok="modalFormOk"
      >
        <template
          slot="dialog-content"
          slot-scope="tableInfoData"
        >
          <!-- 这里是slot 绑定的数据 包含列表数据 是否显示按钮 -->
          <video-form
            ref="modelContent"
            :courseId="courseId"
            :table-info-data="tableInfoData"
          />
        </template>
      </model-dialog>
    </template>

  </div>
</template>
<script>
import { ChapterApi } from '@/api/course/url-chapter'
import { VideoApi } from '@/api/course/url-Video'
import { postAction, getAction, putAction, deleteAction } from '@/api/manage'
import ModelDialog from '@/views/components/common/ModelDialog'
import ChapterForm from './ChapterForm.vue'
import VideoForm from '../video/VideoForm.vue'
export default {
  components: { ModelDialog, ChapterForm, VideoForm },
  data() {
    return {
      // 章节嵌套列表
      chapterList: [],
      moduleChapterName: '章节信息',
      moduleVideoName: '课时信息',
      url: {
        chapterSave: ChapterApi.save,
        chapterGetById: ChapterApi.getById,
        chapterUpdate: ChapterApi.update,
        chapterRemoveById: ChapterApi.removeById,
        videoSave: VideoApi.save,
        videoGetById: VideoApi.getById,
        videoUpdate: VideoApi.update,
        videoRemoveById: VideoApi.removeById,
      },
      courseId: this.$parent.courseId
    }
  },
  created() {
    this.fetchNodeList()
  },
  methods: {
    // 获取远程数据
    fetchNodeList() {
      getAction(ChapterApi.getNestedTreeList, { courseId: this.$parent.courseId }).then(res => {
        if (res.success) {
          this.chapterList = res.data.items
        } else {
          this.$message.info("未录入章节信息")
        }
      })
    },
    // 上一步
    prev() {
      this.$parent.active = 0
    },
    // 下一步
    next() {
      this.publishBtnDisabled = true
      this.$parent.active = 2
    },
    // 阻止事件传播
    stopProp(e) {
      e.stopPropagation()
    },
    // 删除章节方法
    removeChapterById(chapterId) {
      this.$confirm('此操作将永久删除该章节，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAction(this.url.chapterRemoveById, { id: chapterId }).then(res => {
          if (res.success) {
            this.$message.success("删除该章节")
            this.fetchNodeList()
          } else {
            this.$message.error(res.message)
          }
        })
      }).then(response => {
        this.fetchNodeList()
        this.$message.success(response.message)
      }).catch((response) => {
        if (response === 'cancel') {
          this.$message.info('取消删除')
        }
      })
    },
    // 添加的方法
    handleChapterAdd() {
      if (!this.url.chapterSave) {
        this.$message.error('请设置url.chapterSave属性!');
        return;
      }
      this.$refs.modelDialog.showDialogAdd(
        this.moduleChapterName + '新增',
        this.url.chapterSave,
        undefined,
        undefined,
        { moduleName: this.moduleChapterName },
        this.tableData
      );
    },
    // 修改的方法
    handleChapterEdit(record, isLoadData) {
      if (!this.url.chapterUpdate) {
        this.$message.error('请设置url.chapterUpdate属性!');
        return;
      }
      if (!isLoadData) {
        isLoadData = false;
      }
      // 判断是否传递了根据Id进行获取数据
      if (isLoadData && !this.url.chapterGetById) {
        this.$message.error('请设置url.chapterGetById的属性!');
        return;
      }
      this.$refs.modelDialog.showDialogEdit(
        this.moduleChapterName + '编辑',
        record,
        this.url.chapterUpdate,
        undefined,
        undefined,
        isLoadData,
        this.url.chapterGetById,
        { moduleName: this.moduleChapterName }
      );
    },
    // 添加的方法
    handleAdd(id) {
      if (!this.url.videoSave) {
        this.$message.error('请设置url.videoSave属性!');
        return;
      }
      this.$refs.VideoModelDialog.showDialogAdd(
        this.moduleVideoName + '新增',
        this.url.videoSave,
        undefined,
        undefined,
        { moduleName: this.moduleVideoName },
        { chapterId: id }
      );
    },
    // 修改的方法
    handleEdit(chapterId, id, isLoadData) {
      if (!this.url.videoUpdate) {
        this.$message.error('请设置url.videoUpdate属性!');
        return;
      }
      if (!isLoadData) {
        isLoadData = false;
      }
      // 判断是否传递了根据Id进行获取数据
      if (isLoadData && !this.url.videoGetById) {
        this.$message.error('请设置url.videoGetById的属性!');
        return;
      }
      this.$refs.VideoModelDialog.showDialogEdit(
        this.moduleVideoName + '编辑',
        { id: id, chapterId: chapterId },
        this.url.videoUpdate,
        undefined,
        undefined,
        isLoadData,
        this.url.videoGetById,
        { moduleName: this.moduleVideoName }
      );
    },
    // 根据id删除
    handleDelete(id, callback) {
      if (!this.url.videoRemoveById) {
        this.$message.error('请设置url.videoRemoveById属性!')
        return
      }
      this.$confirm('此操作将永久删除该课时，是否继续？', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        deleteAction(this.url.videoRemoveById, { id: id }).then(res => {
          if (res.success) {
            this.$message.success('操作成功')
            if (callback) {
              callback()
            } else {
              this.fetchNodeList()
            }
          } else {
            this.$message.warning(res.message)
          }
        })
      }).catch(res => {
        if (res === 'cancel') {
          this.$message.info("取消删除！")
        }
      })
    },
    // 在编辑和新增的时候执行完成之后需要进行刷新表格数据 @ok = 'modelFormOk'
    modalFormOk() {
      this.fetchNodeList()
    },
  }
}
</script>
<style scoped>
.el-collapse-item__arrow {
  float: left;
  margin-left: 5px;
  margin-right: 15px;
}

.el-collapse {
  border: 1;
  margin: 20px 0 20px;
}

.deploy-setting .el-collapse-item__header {
  border-bottom: 1px solid #96a6b6;
}

.deploy-setting .el-collapse-item__wrap {
  border-bottom: 0px;
}

.chapterList {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chapterList li {
  position: relative;
}
.chapterList p {
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #ddd;
}
.chapterList .acts {
  float: right;
  padding-right: 20px;
  font-size: 14px;
}
.videoList {
  padding-left: 50px;
}
.videoList p {
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dashed #ddd;
}
</style>